<script setup>
const mag = "匿名子组件";
const msg = "具名子组件";
</script>

<template>
  <div id="layoutView">
    <header class="layout-top">
      <!-- 默认插槽，也叫匿名插槽，全局只能有一个
      给父组件预留一个渲染，将来才确定结果的位置 -->
      <slot :mag="mag"></slot>
    </header>
    <main class="layout-main">
      <!-- 具名插槽：可以有多个，就是给slot一个name属性指定一个名字 -->
      <!-- 作用域插槽：子组件内部 的数据需要传给父组件的插槽中使用-->
      <aside class="layout-main-left">
        <slot name="left" msg="假数据"></slot>
      </aside>
      <div class="layout-main-content">
        <slot name="content"></slot>
      </div>
      <aside class="layout-main-right">
        <slot name="right" msg="假数据"></slot>
      </aside>
    </main>
  </div>
</template>

<style lang="scss" scoped>
#layoutView {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: #ccc;
  .layout-top {
    flex: 0 0 50px;
    background-color: #faa8a8;
  }
  .layout-main {
    display: flex;
    flex: 1;
    background-color: #f6efb0;
    // 父选择器，这里的& === .layout-main
    &-left {
      flex: 0 0 100px;
      height: 100%;
      background-color: rgb(244, 208, 244);
    }
    &-content {
      flex: 1 1 auto;
      background-color: rgb(203, 242, 255);
    }
    .layout-main-right {
      flex: 0 0 100px;
      height: 100%;
      background-color: rgb(244, 208, 244);
    }
  }
}
</style>
